import EvaluationRecord from '@/components/EvaluationRecord';
import GuidanceRecord from '@/components/GuidanceRecord';
import HealthRecords from '@/components/HealthRecords';
import PhysiologicalMonitoring from '@/components/PhysiologicalMonitoring';
import TrainingRecord from '@/components/TrainingRecord';
import { get_patient_info } from '@/services/patient';
import age from '@/utils/age';
import { ProDescriptions } from '@ant-design/pro-components';
import { Divider, Modal, Spin, Tabs } from 'antd';
import { useEffect, useState } from 'react';

interface Iprops {
  isShowMemberInfoModal: (show: boolean) => void;
  isMemberInfoModalOpen: boolean;
  patientId: number | undefined;
}
type Info = {
  family_address: string;
  area_name: string;
  city_name: string;
  province_name: string;
  birth: string;
  id: number;
  phone: string;
  name: string;
  sex: number;
  id_card: string;
  address: string;
  info: any;
};
const MemberDetails = (props: Iprops) => {
  const { isShowMemberInfoModal, isMemberInfoModalOpen, patientId } = props;
  // 存储患者信息
  const [patientinfo, setPatientInfo] = useState<Info | undefined>(undefined);
  useEffect(() => {
    //   页面初始化获取患者信息
    const getData = async () => {
      if (patientId) {
        console.log('patientId', patientId);
        let res: any = await get_patient_info({ id: patientId });
        console.log('患者详情', res);
        if (res.code === 200) {
          setPatientInfo(res.data);
        }
      }
    };
    getData();
  }, []);

  return (
    <Modal
      title="院内指导计划详情"
      open={isMemberInfoModalOpen}
      onCancel={() => isShowMemberInfoModal(false)}
      width={1200}
      destroyOnClose={true}
      footer={null}
    >
      <Divider />
      {patientinfo === undefined ? (
        <div
          style={{
            margin: '20px 0',
            marginBottom: '20px',
            padding: '30px 50px',
            textAlign: 'center',
          }}
        >
          <Spin size="large" />
        </div>
      ) : (
        <>
          <ProDescriptions
            dataSource={patientinfo}
            columns={[
              {
                title: '手机号',
                key: 'phone',
                dataIndex: 'phone',
              },
              {
                title: '姓名',
                key: 'username',
                dataIndex: 'username',
              },
              {
                title: '性别',
                key: 'sex',
                dataIndex: 'sex',
                valueType: 'select',
                valueEnum: {
                  0: {
                    text: '未知',
                  },
                  1: {
                    text: '男',
                  },
                  2: {
                    text: '女',
                  },
                },
              },
              {
                title: '身份证号',
                key: 'id_card',
                dataIndex: 'id_card',
              },
              {
                title: '年龄',
                key: 'birth',
                dataIndex: 'birth',
                render: (_, record) => age(record.birth),
              },
              {
                title: '家庭地址',
                key: 'address',
                dataIndex: 'address',
                render: (_, record) => {
                  return (
                    record.province_name +
                    record.city_name +
                    record.area_name +
                    record.family_address
                  );
                },
              },
            ]}
          ></ProDescriptions>
          <Tabs
            defaultActiveKey="生理监测"
            style={{ minHeight: '600px' }}
            items={[
              {
                key: '生理监测',
                label: '生理监测',
                children: <PhysiologicalMonitoring patientId={patientId}></PhysiologicalMonitoring>,
              },
              {
                key: '评估记录',
                label: '评估记录',
                children: <EvaluationRecord patientId={patientId}></EvaluationRecord>,
              },
              {
                key: '训练记录',
                label: '训练记录',
                children: <TrainingRecord patientId={patientId}></TrainingRecord>,
              },
              {
                key: '指导记录',
                label: '指导记录',
                children: <GuidanceRecord patientId={patientId}></GuidanceRecord>,
              },
              {
                key: '健康档案',
                label: '健康档案',
                children: <HealthRecords info={patientinfo?.info}></HealthRecords>,
              },
            ]}
          />
        </>
      )}
    </Modal>
  );
};

export default MemberDetails;
